import React, { useEffect } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { Button, Space, Tag, Divider, Popconfirm, Modal } from 'antd';
const { confirm } = Modal;
import {
    StarOutlined,
    DeleteOutlined,
    CopyOutlined,
    EditOutlined,
    LineChartOutlined,
} from '@ant-design/icons';
import classNames from 'classnames';
import styles from './QuestionCard.module.scss';
type PropsType = {
    _id: string;
    title: string;
    isPublished: boolean;
    createAt: string;
    answerCount?: number;
    isStar?: boolean;
    isDeleted?: boolean;
};
export default function QuestionCard(props: PropsType) {
    const {
        _id,
        title,
        isPublished,
        createAt,
        isStar,
        answerCount,
        isDeleted,
    } = props;
    const navigate = useNavigate();
    const isPublishClass = styles['isPublish'];
    const publishedClass = styles['published'];
    const publishChassNames = classNames({
        [isPublishClass]: true,
        [publishedClass]: isPublished,
    });

    const onEditQuestion = (id: string) => {
        navigate('/question/edit/' + id);
    };
    const onStatQuestion = (id: string) => {
        navigate('/question/stat/' + id);
    };

    const onDeleteQuestion = () => {
        confirm({
            title: '确认删除',
            content: '删除后不可恢复',
            okText: '确认',
            cancelText: '取消',
            onOk() {
                console.log('delete', _id);
            },
        });
    };
    const onStarQuestion = () => {
        console.log('star', _id);
    };
    const onCopyQuestion = () => {
        console.log('copy', _id);
    };
    return (
        <div>
            <div className={styles['list-item']}>
                <div className={styles['top']}>
                    <div className={styles['left']}>
                        <Link
                            to={
                                isPublished
                                    ? `/question/stat/${_id}`
                                    : `/question/edit/${_id}`
                            }
                            className={styles['title']}
                        >
                            <Space>
                                {isStar && (
                                    <StarOutlined style={{ color: '#f00' }} />
                                )}{' '}
                                {title}
                            </Space>
                        </Link>
                    </div>
                    <div className={styles['right']}>
                        <Tag color={isPublished ? 'processing' : 'default'}>
                            {isPublished ? '已发布' : '未发布'}
                        </Tag>
                        <div>{createAt}</div>
                    </div>
                </div>
                <Divider style={{ margin: '12px 0' }} />
                <div className={styles.bottom}>
                    <div className={styles['left']}>
                        <Space>
                            <Button
                                icon={<EditOutlined />}
                                type="text"
                                size="small"
                                className={styles['edit']}
                                onClick={() => onEditQuestion(_id)}
                            >
                                编辑问卷
                            </Button>
                            <Button
                                type="text"
                                size="small"
                                icon={<LineChartOutlined />}
                                className={styles['data']}
                                onClick={() => onStatQuestion(_id)}
                                disabled={!isPublished}
                            >
                                数据统计
                            </Button>
                        </Space>
                    </div>
                    <div className={styles['right']}>
                        <Button
                            type="text"
                            icon={<StarOutlined />}
                            size="small"
                        >
                            {isStar ? '取消标星' : '标星'}
                        </Button>
                        <Popconfirm
                            title="确定复制该问卷？"
                            onConfirm={onCopyQuestion}
                            okText="确定"
                            cancelText="取消"
                        >
                            <Button
                                type="text"
                                icon={<CopyOutlined />}
                                size="small"
                            >
                                复制
                            </Button>
                        </Popconfirm>

                        <Button
                            type="text"
                            icon={<DeleteOutlined />}
                            size="small"
                            onClick={onDeleteQuestion}
                        >
                            删除
                        </Button>
                    </div>
                </div>
            </div>
        </div>
    );
}
